<template>
  <div style="width: 100%; margin: 0 auto">
    <section class="select-container">
      <section class="item finish">
        <section class="first">
          <span>1</span>
        </section>
        <section class="title">
          <p>选择业务类型</p>
          <section class="title-content">
            <p>可点击“查看详情”了解业务类型，</p>
            <p>请根据需求选择正确的业务类型。</p>
          </section>
        </section>
        <section class="line"></section>
      </section>
      <section class="item horizontal">
        <section class="first" style="background: #dddddd !important">
          <span>2</span>
        </section>
        <section class="title">
          <p>填写业务信息</p>
          <section class="title-content">
            <p>填写客户、产品、数量、</p>
            <p>金额等信息。</p>
          </section>
        </section>
        <section class="line"></section>
      </section>
      <section class="item2 horizontal">
        <section class="other">
          <span>3</span>
        </section>
        <section class="title">
          <p>确认业务信息</p>
          <section class="title-content">
            <p>仔细核对所填写的信息</p>
            <p>并进行确认。</p>
          </section>
        </section>
      </section>
    </section>
    <section class="all-container">
      <section>
        <span class="title">全部业务类型</span>
        <span class="describe"> （按照使用时间倒序排列） </span>
      </section>
      <el-row :gutter="20" style="margin-top: 10px">
        <el-col :span="8" v-for="item in this.tableData" :key="item.id">
          <div class="item">
            <section class="icon"></section>
            <section>
              <section class="title">{{$dictUtils.getDictLabel(item.busValue, item.busType, "")}}</section>
              <section class="desctail">
                <p><span>描述:</span>
                {{item.describes}}</p>
                <section style="font-size: 16px;margin-top:20px">
                  <span style="color: #333333;margin-right:30px" class="mouse"
                  @click="view"
                       >查看详情</span>
                  <span class="el-icon-circle-plus-outline mouse"  @click="go(item)">创建业务</span>
                </section>
              </section>
            </section>
          </div>
        </el-col>
      </el-row>
    </section>
  </div>
</template>
<script>
  import {getModelList} from '@/api/model/model.js'

  export default {
    data () {
      return {
        processType: this.$route.query.processType, // 1-销售；
        tableData: [],
        state: 1, // 启用状态
        page: {
          pageSize: 10,
          pageNo: 1,
          total: 0
        },
        orderBy: {
          name: 'create_date',
          method: 'desc'
        }
      }
    },
    methods: {
      // 获取列表带分页
      getList (processType, state, params, orderName, orderByAORC) {
        this.loading = true
        getModelList({
          processType: processType,
          state: state,
          pageSize: params.pageSize,
          pageNo: params.pageNo,
          orderBy: orderName,
          orderByAORC: orderByAORC
        }).then((res) => {
          if (res.data.code === '200') {
            console.log(1111111)
            this.tableData = res.data.result.list
            if(this.tableData.length==1){
              this.go(this.tableData[0])
              return
            }
            // this.page.total = res.data.result.count
          }
          this.loading = false
        })
      },
      go (row) {
        this.$router.push({path: '/form/template', query: {title: row.names, id: row.id, previewMode: true, method: 'add', processType: row.processType}})
      },
      view () {
        this.$message('敬请期待!')
    }

    },
    mounted () {
      // if(this.$route.query.processType==2){
      //   this.$route.meta.title="新增产品"

      // }
      console.log(this.$route)
      this.getList(this.processType, this.state, this.page, this.orderBy.name, this.orderBy.method)
  }
  }
</script>
<style lang="scss" scoped>
    @import "@/assets/scss/config.scss";
  .select-container {
    p{
      margin: 0;
    }
    margin: 20px 30px 0;
    display: flex;
    .item2,
    .item {
      width: 33.3%;
      display: flex;
      position: relative;
      .first {
        display: inline-block;
        width: 40px;
        height: 40px;
        background: $--color-primary-liyu;
        border-radius: 50%;
        margin-right: 20px;
        text-align: center;
        span {
          width: 7px;

          font-size: 22px;
          line-height: 40px;
          font-weight: 400;
          color: #ffffff;
        }
      }
      .title {
        flex: 1;
        >p{
          font-size: 18px;
          line-height: 40px;
          font-weight: bold;
        }
        .title-content{
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          margin-top: 6px;
          line-height: 25px;
        }
      }
      .line {
        position: absolute;
        left: 191px;
        right: 30px;
        height: 2px;
        background: #dddddd;
        margin-top: 20px;
      }
    }
    .item2 {
      width: 33.3%;
      .other {
        width: 40px;
        height: 40px;
        background: #dddddd;
        border-radius: 50%;
        margin-right: 20px;
        span {
          width: 7px;
          font-size: 22px;
          margin-left: 14px;
          line-height: 38px;
          font-weight: 400;
          color: #ffffff;
        }
      }
    }
    .item.finish{
      .title-content{
        color: #666666;
      }
    }
    .horizontal{
      .title,.title-content{
        color: #999999;
      }
    }
  }
  .all-container {
    >section{
      margin: 50px 0 20px;
    }
    .title {
      width: 108px;
      height: 18px;
      font-size: 18px;
      font-weight: bold;
      color: #333333;
    }
    .describe {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #999999;
    }
    .item {
      height: 180px;
      background: #ffffff;
      box-shadow: 0px 0px 14px 1px rgba(51, 51, 51, 0.1);
      border-radius: 6px;
      display: flex;
      width: 100%;
      padding: 20px;
      .icon {
        width: 60px;
        height: 60px;
        min-width: 60px;
        background: $--color-primary-liyu;
        border-radius: 10px;
        margin-right: 10px;
      }
      .title {
        font-size: 16px;
        line-height: 25px;
        color: #333333;
      }
      .desctail {
        margin-top: 10px;
        font-size: 14px;
        line-height: 30px;
        width: 100%;
        color: #999999;
        word-break: normal;
          >p{
              min-height: 60px;
          }
      }
    }

  }
  .mouse{
    cursor:pointer;
  }
    .el-icon-circle-plus-outline.mouse{
        color: $--color-primary-liyu;
    }
</style>
